<template>
  <div class="setshopdetail-content">
    <div class="headerimg">
      <img :src="foodimg" @click="upimg()">
    </div>
    <van-cell-group>
      <van-field v-model="name" label="商品名" placeholder="请输入商品名"/>
    </van-cell-group>
    <van-cell-group>
      <van-field v-model="mark" label="商品备注" placeholder="请输入商品备注"/>
    </van-cell-group>
    <van-cell-group>
      <van-field v-model="price" label="单价" placeholder="请输入商品单价" type="number"/>
    </van-cell-group>
    <van-cell-group>
      <van-field v-model="num" label="商品库存" placeholder="请选择商品剩余库存"/>
      <div class="opabox" @click="Suk_numbox"></div>
      <van-popup v-model="show" position="bottom">
        <van-picker
          :columns="columns"
          @change="onChange"
          @cancel="onCancel"
          @confirm="onConfirm"
          show-toolbar
        />
      </van-popup>
    </van-cell-group>
    <van-cell-group>
      <van-field v-model="tp" label="商品分类" placeholder="请输入商品类型"/>
      <div class="tplist" @click="Suk_showtplist"></div>
      <van-popup v-model="showtp" position="bottom">
        <van-picker :columns="list" @cancel="onCanceltp" @confirm="onConfirmtp" show-toolbar/>
      </van-popup>
    </van-cell-group>
    <div class="delbtn" @click="Suk_delgood">删除商品</div>
    <div class="addbtn" @click="Suk_toedit">确定修改</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      foodimg: require("@/assets/img/none.png"),
      beforelist: [],
      mark: "",
      showtp: false,
      list: [],
      show: false,
      columns: ["库存无限", "库存不足", "库存为空"],
      name: "",
      tp: "",
      price: "",
      num: "",
      classid: null
    };
  },
  beforeCreate: function() {
    //创建前
  },
  activated() {
    this.Suk_getlist();
  },
  created: function() {
    this.Suk_getlist();
    this.Suk_gettplist();
    //创建后
  },
  beforeMount: function() {
    //挂载前
  },
  mounted: function() {
    //挂载后
  },
  beforeUpdate: function() {
    //更新前
  },
  update: function() {
    //更新后
  },
  methods: {
    // 这里是我们的删除按钮
    Suk_delgood() {
      let that = this;
      let editfood = JSON.parse(localStorage.getItem("editfood"));
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        id:editfood.id
      };
      console.log(Sukdata);
      that.axios
        .post(that.baseUrl + "/product/delete", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function(res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              console.log(res.data);
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    // 这是修改按钮
    Suk_toedit() {
      let that = this;
      let editfood = JSON.parse(localStorage.getItem("editfood"));
      that.$toast.loading({
        message: "加载中..."
      });
      let goodnums = null;
      if (that.num == "库存为空") {
        goodnums = 1;
      } else if (that.num == "库存不足") {
        goodnums = 2;
      } else if (that.num == "库存无限") {
        goodnums = 3;
      }
      var Sukdata = {
        remark: that.mark,
        diningId: localStorage.getItem("myshopid"),
        productName: that.name,
        price: that.price,
        id: editfood.id,
        productNums: goodnums,
        classId: that.classid,
        image: that.foodimg
      };
      console.log(Sukdata);
      that.axios
        .post(
          that.baseUrl + "/product/updateProduct",
          that.Qs.stringify(Sukdata),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(function(res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              console.log(res.data);
              that.$toast.success({
                message: "修改成功！"
              });
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    // 商品分类的弹出框的显示
    Suk_showtplist() {
      let that = this;
      that.showtp = true;
    },
    onCanceltp() {
      let that = this;
      that.showtp = false;
    },
    onConfirmtp(value, index) {
      let that = this;
      that.classid = that.beforelist[index].classId;
      that.tp = value;
      that.showtp = false;
    },
    // 确定
    onConfirm(value, index) {
      let that = this;
      // console.log(value)
      // that.$toast(`当前值：${value}, 当前索引：${index}`);
      that.num = value;
      that.show = false;
    },
    onCancel() {
      let that = this;
      that.show = false;
    },
    Suk_numbox() {
      let that = this;
      that.show = true;
    },
    onChange(picker, value, index) {
      let that = this;
      // that.$toast(`当前值：${value}, 当前索引：${index}`);
    },
    Suk_gettplist() {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        dinId: localStorage.getItem("myshopid")
      };
      // console.log(Sukdata);
      that.axios
        .post(that.baseUrl + "/classs/queryClass", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function(res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              that.beforelist = res.data.data;
              let arr = [];
              for (let i = 0; i < res.data.data.length; i++) {
                arr.push(res.data.data[i].className);
              }
              that.list = arr;
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    // 上传商品图片
    upimg() {
      let that = this;
      dsBridge.call("uploadImg", 10);
      dsBridge.register("addImgCallback", function(data) {
        that.foodimg = data;
        // let str = JSON.parse(data)
        // that.$toast.loading({
        //   message: "加载中..."
        // });
        // alert("12132")
        var Sukdata = {
          zurl: data
        };
        console.log(Sukdata);
        that.axios
          .post(
            that.baseUrl + "/store/storeZheng",
            that.Qs.stringify(Sukdata),
            {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded"
              }
            }
          )
          .then(function(res) {
            if (res.request.status === 200) {
              if (res.data.meta.code == 200) {
                // alert(res.data)
                // alert(that.zimg)
                // that.$toast.clear();
              } else if (res.data.meta.code == 501) {
              }
            }
          });
      });
    },
    Suk_getlist() {
      let that = this;
      localStorage.getItem("editfood");
      let editfood = JSON.parse(localStorage.getItem("editfood"));
      // console.log(editfood,'editfood');
      that.name = editfood.productName;
      that.price = editfood.price;
      that.mark = editfood.remark;
      that.foodimg = editfood.image;
      if (editfood.image == null) {
        that.foodimg = require("@/assets/img/none.png");
      }
      // that.tp = editfood.productName
      if (editfood.productNums == 1) {
        that.num = "库存为空";
      } else if (editfood.productNums == 2) {
        that.num = "库存不足";
      } else if (editfood.productNums == 3) {
        that.num = "库存无限";
      }
      // that.$toast.loading({
      //   message: "加载中..."
      // });
      // var Sukdata = {};
      // // console.log(Sukdata);
      // that.axios
      //   .post(
      //     that.baseUrl + "/product/setProduct",
      //     that.Qs.stringify(Sukdata),
      //     {
      //       headers: {
      //         "Content-Type": "application/x-www-form-urlencoded"
      //       }
      //     }
      //   )
      //   .then(function(res) {
      //     if (res.request.status === 200) {
      //       if (res.data.meta.code == 200) {
      //         // console.log(res.data);
      //         that.$toast.clear();
      //       } else if (res.data.meta.code == 501) {
      //       }
      //     }
      //   });
    }
  }
};
</script>
<style lang="scss" scoped>
.setshopdetail-content {
  font-size: 0.3rem;
}

.headerimg {
  width: 100%;
  height: 7rem;
  img {
    width: 100%;
    height: 100%;
  }
}

.addbtn {
  width: 2.75rem;
  height: 1rem;
  background: #fea600;
  color: #fff;
  text-align: center;
  line-height: 1rem;
  border-radius: 0.2rem;
  float: right;
  margin-right: 5%;
  margin-top: 0.3rem;
}
.delbtn {
  width: 2.75rem;
  height: 1rem;
  background: #f44;
  color: #fff;
  text-align: center;
  line-height: 1rem;
  border-radius: 0.2rem;
  float: right;
  margin-right: 5%;
  margin-top: 0.3rem;
}
.opabox {
  opacity: 0;
  width: 80%;
  height: 1.2rem;
  right: 0;
  position: absolute;
  z-index: 999;
  top: 0;
}
.tplist {
  opacity: 0;
  width: 80%;
  height: 1.2rem;
  right: 0;
  position: absolute;
  z-index: 999;
  top: 0;
}
</style>
